<template>
<div class="about">
  <h2>x: {{x}}, y: {{y}}</h2>

  <h2 v-if="loading">请求加载中...</h2>
  <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
  <img v-else-if="result" :src="result[0].url" alt="">

</div>
</template>

<script lang="ts">
import useClickPosition from '@/hooks/useClickPosition'
import useUrlLoader from '@/hooks/useUrlLoader'

import {watch} from 'vue'

interface CatResult {
  id: string
  url: string
  width: number
  height: number
}
interface DogResult {
  message: string
  status: string
}

export default {
  
  setup() {
    const {x, y} = useClickPosition()
    // const {loading, result, errorMsg} = useUrlLoader<DogResult>('https://dog.ceo/api/breeds/image/random')
    const {loading, result, errorMsg} = useUrlLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search')
    
    /* 
    [
      {
      "breeds": [],
      "id": "U3tp0K4w-",
      "url": "https://cdn2.thecatapi.com/images/U3tp0K4w-.png",
      "width": 2232,
      "height": 1920
      }
      ]
    */
    watch(result, (value) => {
      console.log(value && value[0].url)
    })

    return {
      x, 
      y,
      loading, 
      result, 
      errorMsg
    }
  }
}
/* 
在vue2中组件的js代码的复用技术:  mixin
在vue3中组件的js代码的复用技术: 自定义hook函数
*/
</script>
